<template>

    <div class="smart_container_rightBlock">

        <TopNav />

        <div class="smart_container_rightBlock_title">
            概览
        </div>

        
        <div class="smart_hash_list">
            <div class="smart_hash_list_lis">
                <div class="smart_hash_list_lisLeft">
                    <span class="hash">哈希算力</span>
                    <span class="ks">{{ topList.globalHashRate }}</span>
                    <span class="bf"><i class="point"></i>{{ topList.globalHashRate }}</span>
                </div>
                <div class="smart_hash_list_lisRight">
                    <img :src="getBarChart1Png" alt="" />
                </div>
            </div>
            <div class="smart_hash_list_lis">
                <div class="smart_hash_list_lisLeft">
                    <span class="hash">出块间隔</span>
                    <span class="ks">{{ topList.globalBlockTimeCost }}</span>
                    <span class="bf"><i class="point"></i>{{ topList.globalBlockTimeCostPer }}</span>
                </div>
                <div class="smart_hash_list_lisRight">
                     <img :src="getBarChart2Png" alt="" />
                </div>
            </div>
            <div class="smart_hash_list_lis">
                <div class="smart_hash_list_lisLeft" @click="handleGoToMc">
                    <span class="hash">全网高度</span>
                    <span class="ks">{{ topList.currentBlockHeight }}</span>
                    <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span>
                </div>
                <div class="smart_hash_list_lisRight">
                     <img :src="getBarChart3Png" alt="" /> 
                </div>
            </div>
            <div class="smart_hash_list_lis">
                <div class="smart_hash_list_lisLeft">
                    <span class="hash">全网难度</span>
                    <span class="ks">{{ topList.globalDifficulty }}</span>
                    <span class="bf"><i class="point"></i>{{ topList.globalDifficultyPer }}</span>
                </div>
                <div class="smart_hash_list_lisRight">
                     <img :src="getBarChart4Png" alt="" />
                </div>
            </div>
            <div class="smart_hash_list_lis">
                <div class="smart_hash_list_lisLeft">
                    <span class="hash">全网交易</span>
                    <span class="ks">{{ topList.globalTransactionCount }}</span>
                    <span class="bf"><i class="point"></i>{{ topList.globalTransactionCountPer }}</span>
                </div>
                <div class="smart_hash_list_lisRight">
                     <img :src="getBarChart5Png" alt="" />
                </div>
            </div>
           
        </div>

        <div class="smart_container_qkMessageBlock">
            <div class="left">
               <div class="smart_qkMessageBlock_left">最近出块</div>
                <div class="smart_container_tableList">
                    <table>
                        <thead>
                            <tr>
                                <th width=80>块高度</th>
                                <th>播报方</th>
                                <th width=80>交易笔数</th>
                                <th width=100>用时</th>
                                <th width=80>出块奖励</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(_item, _index) in tableList" :key="_index">
                                <td>{{_item.height}}</td>
                                <td valign="middle" align="center" ><div class="hash">{{_item.address}}</div></td>
                                <td>{{_item.transactionCount}}</td>
                                <td>{{_item.timeCost}}</td>
                                <td>{{_item.reward}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="right">
                <div class="title">节点分布</div>
                <div class="echart"><img :src="getMapPng" /></div>
                <div class="list">
                    <div class="li" v-for="(_item,_index) in nodeDistInfoList" :key="_index">
                        <span class="radio"></span>
                        <span class="text">{{ _item.country }}</span>
                        <span class="number">{{ _item.nodeCount }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
</template>

<script lang="ts">

import { Vue, Component, Prop, Watch } from "vue-property-decorator";

import TopNav from './topNav/topNav.vue';

import { mapGetters, mapActions } from "vuex";

import BarChart1Png from '@/assets/images/public/BarChart1.png';
import BarChart2Png from '@/assets/images/public/BarChart2.png';
import BarChart3Png from '@/assets/images/public/BarChart3.png';
import BarChart4Png from '@/assets/images/public/BarChart4.png';
import BarChart5Png from '@/assets/images/public/BarChart5.png';
import MapPng from '@/assets/images/public/Map.png';

@Component({
    components:{
        TopNav
    },
    methods:{
        ...mapActions([
            'globalInfoRequestAction',
            'getLatestBlockRequestAction',
            'getGlobalNodeDistInfoRequestAction'
        ])
    }
})
export default class Generalization extends Vue {

    /** 图片 */
    private getBarChart1Png = BarChart1Png;
    private getBarChart2Png = BarChart2Png;
    private getBarChart3Png = BarChart3Png;
    private getBarChart4Png = BarChart4Png;
    private getBarChart5Png = BarChart5Png;
    private getMapPng       = MapPng;
    
    /** 获取的概览的字段 */
    private topList:Object = {};

    /** 最近出块 */
    private tableList:Array<object> = [];

    /** 节点分布 */
    private nodeDistInfoList:Array<object> = [];

    /** 初始化函数 */
    private mounted():void {

        (async()=>{

            /** 基础的一些数据 */
            this.topList   =  await this['globalInfoRequestAction']();

            /** 最近出块 */
            this.tableList =  await this['getLatestBlockRequestAction']();

            /** 节点分布 */
            this.nodeDistInfoList = await this['getGlobalNodeDistInfoRequestAction']();

            console.log(this.nodeDistInfoList);
        })();
    }


    /** 全网高度点击跳转mc区块 */
    handleGoToMc(){

        this.$router.push({ path: '/browser/mcMainBlockInformation' })
    }
}

</script>

<style lang="scss">
    @import 'generalization';
</style>
